<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>生成二维码</title>
  <link type="text/css" rel="stylesheet" href="../dist/css/bootstrap.css">
  <link type="text/css" rel="stylesheet" href="../dist/css/bootstrap-grid.css">
  <link type="text/css" rel="stylesheet" href="../dist/css/bootstrap-reboot.css">
</head>
<body>
<div class="container" style="margin-top: 50px">
  <div class="container-fluid">
    密钥：<input name="okey" type="password" value="abc" placeholder="abc" aria-placeholder="abc">
    文字：<input name="otext" type="text" value="abc" placeholder="12" aria-placeholder="12">
    加密：<input name="en" type="text" value="" title="加密">
    解密：<input name="de" type="text" value="" title="解密">
    <input name="gen" type="button" value="生成">
  </div>
</div>
<script src="../dist/zaddjs/jquery/jquery-3.3.1.min.js"></script>
<script src="../dist/zaddjs/encrypt/src/core.js"></script>
<script src="../dist/zaddjs/encrypt/src/cipher-core.js"></script>
<script src="../dist/zaddjs/encrypt/src/tripledes.js"></script>
<script src="../dist/zaddjs/encrypt/src/mode-ecb.js"></script>

<script type="text/javascript">
  //加密的私钥
  // let 和 Var 有什么区别？
  let key = $('input[name=okey]').val();
  console.log("key "+key);
  // DES加密
  function encryptByDES(message) {
    key = $('input[name=okey]').val();
    //把私钥转换成16进制的字符串
    let keyHex = CryptoJS.enc.Utf8.parse(key);
    //模式为ECB padding为Pkcs7
    let encrypted = CryptoJS.DES.encrypt(message, keyHex, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    //加密出来是一个16进制的字符串
    return encrypted.ciphertext.toString();
  }
  //DES  ECB模式解密
  function decryptByDESModeEBC(ciphertext) {
    //把私钥转换成16进制的字符串
    let keyHex = CryptoJS.enc.Utf8.parse(key);
    //把需要解密的数据从16进制字符串转换成字符byte数组
    let decrypted = CryptoJS.DES.decrypt({
      ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
    }, keyHex, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });
    //以utf-8的形式输出解密过后内容
    return decrypted.toString(CryptoJS.enc.Utf8);
  }
</script>
<script type="text/javascript">
  $(function () {
    $("input[name='gen']").click(function () {
      //需要加密的内容
      // let str1 = encryptByDES('12');
      // let str2 = decryptByDESModeEBC(str1);
      // console.log(str1.toString());
      // console.log(str2);
      let otext = $("input[name='otext']").val();
      let str3 = encryptByDES(otext);
      let str4 = decryptByDESModeEBC(str3);
      $("input[name='en']").val(str3);
      $("input[name='de']").val(str4);
    })
  });
</script>
</body>
</html>
